<template>
	<scroll-view scroll-y="true" class="page">
		<u-navbar :placeholder="true" title="发表动态" @leftClick="$utils.back()" border>

		</u-navbar>
		<view>
			<view class="mt20 flex pb20" style="min-height: 20vh;">
				<!-- <u--textarea maxlength='999' v-model="textarea" placeholder="请输入内容" autoHeight></u--textarea> -->
				
				<editor id="editor" class="ql-container" placeholder="请输入内容" @ready="onEditorReady"></editor>
			</view>
			<view v-if="imageUrl.length==0&&!video.url" class="mt20 upload flex" @click="openSelect">
				<u-icon name="camera-fill" color="#D3D4D6" size="50"></u-icon>
				<view>
					请选择上传视频或是图片
				</view>
			</view>
			<view :class="{mt20:imageUrl.length!=0}" v-if="imageShow">
				<imageUpload :imageShow='imageShow' @changeImageList='changeImageList' :imageUrl='imageUrl'
					@close='imageShow=null' />
			</view>
			<view :class="{mt20:video.url}" v-if="videoShow">
				<videoUpload @changeVideo='changeVideo' @close='videoShow=false' />
			</view>
			<view class="mt20 borderBottom borderTop flex pb20 pt20">
				<view class="mr20 ">
					是否推荐：
				</view>
				<view style="flex: 1;">
					<u-switch v-model="is_recommend"></u-switch>
				</view>
			</view>
			<view class="mt20 borderBottom borderTop flex pb20 pt20">
				<view class="mr20 ">
					选择工地：
				</view>
				<view style="flex: 1;" >
					<view v-if="decorate_id" class="userBox">
						<u-avatar :src='customer.avatar' size='40rpx' />
						<view>
							<u-text :lines='1' :text='customer.name' size='24rpx' />
						</view>
					</view>
					<text v-else>未选择</text>
				</view>
			</view>
			<view v-if="decorate_id" class="mt20 borderBottom borderTop flex pb20 pt20">
				<view class="mr20 ">
					选择流程：
				</view>
				<view style="flex: 1;" @click="processShow=true">
					<text v-if="process_id">{{processName}}</text>
					<text v-else>未选择</text>
				</view>
			</view>
			<u-popup :show="showSelect" :round="10" @close="showSelect=false">
				<view class="popupTitle">
					<u-icon name="close" color='#fff'></u-icon>
					<view>
						选择方式
					</view>
					<u-icon name="close" @click="showSelect=false"></u-icon>
				</view>
				<view style="height: 20vh;">
					<u-grid :border="false" @click="clickGrid">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</u-popup>
		</view>
		<view>
			<selectCustomer :show='customerShow' @close='customerShow=false' @selectCustomer='selectCustomer' />
			<u-picker :show="processShow" :columns="process" keyName='name' @cancel='processShow=false'
				@confirm='confirm'></u-picker>
		</view>
		<view class="bottom">
			<u-button color=" #3975c6" :disabled="disabled" @click="pulish">发表</u-button>
		</view>
	</scroll-view>
</template>

<script>
	import imageUpload from './components/imageUpload';
	import videoUpload from './components/videoUpload';
	import selectCustomer from '@/components_company/selectCustomer';
	export default {
		components: {
			imageUpload,
			videoUpload,
			selectCustomer,
		},
		data() {
			return {
				editorCtx: null,
				baseList: [{
						name: 'photo',
						title: '本地图片'
					},
					{
						name: 'play-right',
						title: '本地视频'
					},
					{
						name: 'chat',
						title: '素材聊天'
					},
				],
				is_recommend: false,
				imageUrl: [],
				video: {

				},
				decorate_id: null,
				process_id: null,
				textarea: null,
				showSelect: false,
				imageShow: null,
				videoShow: false,
				disabled: false,
				customer: null,
				processName: null,
				customerShow: false,
				process: [

				],
				processShow: false,
				loading: true,
				customer_id: null
			}
		},
		onLoad(op) {
			let obj
			if (op.decorate_id) {
				obj = {
					decorate_id: op.decorate_id
				}
			}
			this.$api_company.Active.Latest(obj).then(res => {
				const customer = res.data.customer
				const process = res.data.process
				const decorate = res.data.decorate
				if(!decorate){
					this.loading = false
					return
				}
				this.decorate_id = decorate.id
				this.process_id = process.id
				this.customer_id = customer.id
				this.customer = {
					name: customer.nick_name,
					avatar: customer.avatar
				}
				this.processName = process.title
				this.loading = false
			})
		},
		watch: {
			decorate_id() {
				this.$api_company.Decorate.Detail(this.decorate_id).then(res => {
					if (res.data.decorate.processes.length == 0) {
						uni.$u.toast('暂无流程，请重新选择工地')
						this.processName = null
						this.process_id = null
						this.customerShow = true
						return
					}
					this.process = [
						res.data.decorate.processes.map(item => {
							return {
								name: item.title,
								id: item.id
							}
						})
					]
				})
			}
		},
		methods: {
			onEditorReady() {
				uni.createSelectorQuery().select('.ql-container').context((res) => {
					this.editorCtx = res.context
					this.editorCtx.setContents({
						html: this.textarea
					})
				}).exec()
			},
			clickGrid(e) {
				if (e == 0) {
					this.imageShow = 'photo'
					this.showSelect = false
				} else if (e == 1) {
					this.videoShow = true
					this.showSelect = false
				} else {
					this.imageShow = 'chat'
					this.showSelect = false
				}
			},
			confirm(e) {
				const item = e.value[0]
				this.processName = item.name
				this.process_id = item.id
				this.processShow = false
			},
			selectCustomer(item) {
				console.log(item)
				this.customer = {
					name: item.remark_name,
					avatar: item.customer.avatar
				}
				this.decorate_id = item.id
				this.customer_id = item.customer_id
				this.customerShow = false
			},

			openSelect() {
				this.showSelect = true
			},
			changeImageList(e) {
				this.imageUrl = e
			},
			changeVideo(e) {
				this.video = e
			},
			pulish() {
				if (!this.imageUrl.every(item => item.upload) && this.imageUrl.length) {
					uni.$u.toast('正在上传中')
					return
				}
				if (!this.video.upload && this.video.url) {
					uni.$u.toast('正在上传中')
					return
				}
			
				
				if (!this.decorate_id) {
					uni.$u.toast('请选择工地')
					return
				}
				if (!this.process_id) {
					uni.$u.toast('请选择工艺流程')
					return
				}
				if(!this.imageUrl.length&&!this.video.id){
					uni.$u.toast('必须上传图片视频')
					return
				}
				
				this.editorCtx.getContents({
					success: (res) => {
						this.textarea = res.html
						if (!this.textarea) {
							uni.$u.toast('请输入内容')
							return
						}
						if (this.textarea.length < 6) {
							uni.$u.toast('内容长度不能小于6个字符')
							return
						}
						this.Add()
					}
				})
				
			},
			Add(){
				this.disabled = true
				let obj = {
					customer_id: ~~this.customer_id,
					decorate_id: ~~this.decorate_id,
					is_recommend: this.is_recommend ? 1 : 0,
					process_id: ~~this.process_id,
					image_ids: this.imageUrl.map(item => item.id),
					video_ids: this.video.id ? [this.video.id] : [],
					aliyun_video_id: this.video.aliyun_video_id ? this.video.aliyun_video_id : '',
					title: this.textarea
				}
				this.$api_company.Active.Add(obj).then(res => {
					uni.reLaunch({
						url: '/customer_company/detail?id=' + this.decorate_id
					})
				}).catch(err => {
					this.disabled = false
					uni.$u.toast(err.message)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		height: calc(100vh - constant(safe-area-inset-bottom) + 10rpx);
		height: calc(100vh  - env(safe-area-inset-bottom) + 10rpx);
		flex-direction: column;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.borderBottom {
		border-bottom: 1rpx solid #f1f1f1;
	}

	.borderTop {
		border-top: 1rpx solid #f1f1f1;
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.mr20 {
		margin-right: 10rpx;
	}



	.flex {
		display: flex;

	}

	.pb20 {
		padding-bottom: 20rpx;
	}

	.pt20 {
		padding-top: 20rpx;
	}

	.upload {
		border-radius: 8rpx;
		background-color: #f5f5f5;
		width: 100%;
		height: 200rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	::v-deep .u-border {
		border-color: #fff !important;
	}

	::v-deep .u-textarea {
		padding: 0 !important;
	}

	.selectItem {
		font-size: 30rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.selectItem:nth-child(1) {
		border-bottom: 1rpx solid #f1f1f1;
	}

	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx 0;

		view:nth-child(2) {
			flex: 0.98;
		}
	}

	.bottom {
		margin: 0 auto;
		margin-top: 100rpx;
		width: calc(100% - 40rpx);
	}
</style>